<template>
  <div class="p-4">
    <n-card title="菜单管理">
      <template #header-extra>
        <n-button type="primary" @click="handleAdd">
          <template #icon>
            <n-icon><add-icon /></n-icon>
          </template>
          新增菜单
        </n-button>
      </template>

      <n-tree
        block-line
        :data="treeData"
        :render-label="renderLabel"
        :render-prefix="renderPrefix"
        :render-suffix="renderSuffix"
        :expand-on-click="false"
        :selectable="false"
      />
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { h, ref } from "vue";
import { NButton, NSpace, NIcon, NTag } from "naive-ui";
import { AddIcon, EditIcon, TrashIcon } from "@/components/Icon";
import * as Icons from "@/components/Icon";

const treeData = ref([
  {
    label: "系统管理",
    key: "system",
    icon: "SettingIcon",
    children: [
      {
        label: "用户管理",
        key: "system:user",
        icon: "PersonIcon",
      },
      {
        label: "角色管理",
        key: "system:role",
        icon: "KeyIcon",
      },
      {
        label: "菜单管理",
        key: "system:menu",
        icon: "MenuIcon",
      },
    ],
  },
]);

const renderLabel = ({ option }: any) => {
  return h("div", { class: "flex items-center" }, [
    option.icon &&
      h(NIcon, { class: "mr-2" }, () =>
        h(Icons[option.icon as keyof typeof Icons])
      ),
    h("span", null, option.label),
  ]);
};

const renderPrefix = () => {
  return h(NTag, { size: "small", class: "mr-2" }, { default: () => "菜单" });
};

const renderSuffix = ({ option }: any) => {
  return h(
    NSpace,
    { class: "ml-4" },
    {
      default: () => [
        h(
          NButton,
          {
            size: "tiny",
            quaternary: true,
            type: "info",
            onClick: () => handleEdit(option),
          },
          { icon: () => h(EditIcon) }
        ),
        h(
          NButton,
          {
            size: "tiny",
            quaternary: true,
            type: "error",
            onClick: () => handleDelete(option),
          },
          { icon: () => h(TrashIcon) }
        ),
      ],
    }
  );
};

const handleAdd = () => {
  // TODO: 实现新增逻辑
};

const handleEdit = (_node: any) => {
  // TODO: 实现编辑逻辑
};

const handleDelete = (_node: any) => {
  // TODO: 实现删除逻辑
};
</script>
